<template>
  <sg-menu style="width: 280px" @on-select="(cmd) => console.log(cmd)">
    <sg-tree-menu v-for="submenu in menu" :key="submenu.name" :node="submenu" />
  </sg-menu>
</template>

<script>
import SgTreeMenu from './sg-tree-menu.vue'
import axios from 'axios'
export default {
  components: {
    SgTreeMenu
  },
  data() {
    const menu = []
    axios.get('menu.json', {}).then(
      response => {
        this.menu = response.data
      }
    ).catch(
      () => {
        this.menu = [
          {
            name: "一级菜单1",
            children: [
              {
                name: "二级菜单项1",
                cmd: "sub menu item 1"
              },
              {
                name: "二级菜单项2",
                cmd: "sub menu item 2"
              }
            ]
          },
          {
            name: "一级菜单2",
            children: [
              {
                name: "二级菜单1",
                children: [
                  {
                    name: "三级菜单项1",
                    cmd: "sub sub menu item 1"
                  },
                  {
                    name: "三级菜单项2",
                    cmd: "sub sub menu item 2"
                  }
                ]
              },
              {
                name: "二级菜单2",
                children: [
                  {
                    name: "三级菜单项3",
                    cmd: "sub sub menu item 3"
                  },
                  {
                    name: "三级菜单项4",
                    cmd: "sub sub menu item 4"
                  }
                ]
              },
              {
                name: "二级菜单项3",
                cmd: "sub menu item 3"
              }
            ]
          }
        ]
      }
    )
    return {
      menu: menu
    }
  }
}
</script>
